/* 用法 import styles from './Button.module.css'; className={styles["my-button"]} */
.my-button {
  width: 500px;
  height: 48px;
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box; /* 边框盒模型 */
}

/* 用法 import styles from './Button.module.css'; <button className={styles.myButtton}>按钮</button> */
.myButtton {
  background-color: #0a290b; /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px; /* 外边距 上下4px 左右2px */
  cursor: pointer;
  border-radius: 8px;
}

.item {
  display: flex;
  width: 500px;
  padding: 5px;
  background-color: orange;
  border-radius: 10px;
}

.mydata {
  text-align: center;
  width: 60px;
  height: 70px;
  overflow: hidden; /* 裁剪溢出的子元素 */
  background-color: white;
  background-clip: padding-box; /* 背景裁剪边框盒模型 */
  border-radius: 5px; /* 圆角 */
}

.month {
  height: 30px;
  line-height: 30px; /* 垂直居中line-height+text-align可是实现文字水平和垂直居中 */
  font-size: 12px;
  background-color: red;
  color: white;
}

.day {
  display: flex; /* flexbox布局 设置子元素居中的方案*/
  justify-content: center;
  align-items: center;
  height: 40px;
  background-clip: padding-box;
  color: #000;
}

.content {
  position: relative; /* 添加相对定位，通常用于为子元素的绝对定位提供定位上下文 */
  text-align: center; /* 文字居中 */
  flex: auto; /* 子元素自动伸缩 */
}

/* 子代选择器> 后代选择器是空格 */
.content > div {
  /* color: rgb(80, 29, 29); */
  font-size: large;
}

.delete {
  position: absolute; /* 绝对定位 */
  top: 1px; /* 距离顶部的距离 */
  right: 1px; /* 距离右边的距离 */
  color: white;
  cursor: pointer; /* 鼠标移入时显示手型 */
  font-size: 20px;
  font-weight: bold; /* 加粗 */
}

.delete:hover {
  /* 鼠标悬停时文字颜色变红 */
  color: red;
}
